<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <Popconfirm title="确定要删除吗"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="handleBatchDeletUser">
        <a-button type="primary">批量删除</a-button>
      </Popconfirm>
    </template>
    <template #prices="{ record }">
      {{record.symbol+record.prices}}
    </template>

    <template #action="{ record, column }">
      <TableAction :actions="createActions(record, column)" />
    </template>
  </BasicTable>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
  BasicTable,
  useTable,
  BasicColumn,
  FormSchema,
  EditRecordRow,
  ActionItem,
  TableAction,
} from '/@/components/Table';
import { ListApi, DeleteApi, EditStateApi } from '/@/api/form/intention';
import formatDic from '/@/utils/formatDic';
import { stateList, stateList1, AreaList } from './data';
import { Popconfirm } from 'ant-design-vue';
import { GetcitylistApi } from '/@/api/activityAdmin/index';
// import moment from 'moment';
// import { UserItem } from '/@/api/user/userModel';
const columns: BasicColumn[] = [
  {
    title: '身份',
    dataIndex: 'role',
    format: formatDic(stateList1),
    // format: (record: any) => {
    //   return record.role==1 ? '房东本人' : '代理中介';
    // },
  },
  {
    title: '区域位置',
    dataIndex: 'bigareaForm',
  },
  {
    title: '详细地址',
    dataIndex: 'address',
  },
  {
    title: '微信号',
    dataIndex: 'wechat',
  },
  {
    title: '电话',
    dataIndex: 'phone',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
  {
    title: '理想出售时间',
    dataIndex: 'sellTime',

    // format: (record: any) => {
    //   if (record.sellTime) {
    //     return moment(record.sellTime).format('YYYY-HH-DD hh:mm:ss');
    //   } else {
    //     return '';
    //   }
    // },
  },
  {
    title: '理想出售价格',
    dataIndex: 'prices',
    slots: { customRender: 'prices' },
  },
  {
    title: '提交时间',
    dataIndex: 'createTime',
  },
  {
    title: '状态',
    dataIndex: 'status',
    format: formatDic(stateList),
  },
];
const colProps = {
  span: 4,
};
const schemas: FormSchema[] = [
  {
    label: '邮箱：',
    field: 'email',
    component: 'Input',
    colProps,
  },
  {
    label: '电话：',
    field: 'phone',
    component: 'Input',
    colProps,
  },
  {
    label: '微信号：',
    field: 'wechat',
    component: 'Input',
    colProps,
  },
  {
    label: '状态：',
    field: 'status',
    component: 'Select',
    componentProps: {
      options: stateList,
    },
    colProps,
  },
];
export default defineComponent({
  name: 'Intention',
  components: {
    BasicTable,
    TableAction,
    Popconfirm,
  },
  setup() {
    const citylist = ref<AreaList[]>([]);
    const [registerTable, { reload, getSelectRows }] = useTable({
      api: ListApi,
      rowSelection: {
        type: 'checkbox',
      },
      useSearchForm: true,
      // showIndexColumn:true,
      columns,
      formConfig: {
        schemas,
        labelWidth: 80,
      },
      afterFetch(record) {
        record.forEach((element) => {
          const cityItem = citylist.value.filter((item) => {
            return item.id == element.city;
          });
          if (cityItem.length > 0) {
            element.bigareaForm = `${cityItem[0].city || ''}-${element.area || ''}`;
          }
        });
      },
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
    });
    function Getcitylist() {
      GetcitylistApi().then((res) => {
        if (res.code == 200) {
          citylist.value = res.data;
        }
      });
    }
    Getcitylist();
    // 表格按钮
    function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
      if (record.status == 0) {
        return [
          {
            label: '已处理',
            color: 'success',
            onClick() {
              handleChangeStatus(record);
            },
          },
          {
            label: '删除',
            color: 'error',
            popConfirm: {
              title: '确定要删除吗！',
              confirm() {
                handleBatchDeletUser();
              },
            },
          },
        ];
      } else {
        return [
          {
            label: '删除',
            color: 'error',
            popConfirm: {
              title: '确定要删除吗！',
              confirm() {
                handleBatchDeletUser();
              },
            },
          },
        ];
      }
    }
    // 删除
    function handleBatchDeletUser() {
      const selectRows = getSelectRows();
      const ids = selectRows.map((item) => item.id);
      const _ids = ids.join(',');
      DeleteApi(_ids).then((_) => {
        reload();
      });
    }
    // 改变状态
    function handleChangeStatus(record: any) {
      record.status = record.status === 0 ? 1 : 0;
      EditStateApi(record).then((_) => {
        reload();
      });
    }

    return {
      registerTable,
      handleBatchDeletUser,
      createActions,
    };
  },
});
</script>
<style lang="less" scoped>
</style>
